<template>
  <div class="p-20">
    <div class="tile-card p-20">
      <h1>使用示例</h1>
      <div class="code">
        <div class="tip">直接导入组件使用</div>
        <highlightjs :code="code"></highlightjs>
        <div class="tip">从库中导出IconPark组件，并使用type来表示要渲染的图标</div>
        <highlightjs :code="code2"></highlightjs>
        <div class="tip note">
          <span
            >在任何情况下，都不建议你使用全局导入的方式，因为图标数量非常多，全部导入会增大打包体积，导致初次加载该页面非常慢，</span
          ><a class="link" href="https://bytedance.larkoffice.com/wiki/wikcnrOVHCJQ4V3a7mDvmLjrePf" target="_blank">
            点我查看更多图标使用方式<Link
          /></a>
        </div>
      </div>
      <h1>图标列表</h1>
      <div class="mt-20 mb-20">
        <el-alert type="error" :closable="false">
          <VolumeNotice />
          管理端使用的图标为iconPark，其图标总数为{{
            iconJson.length
          }}个，如果渲染过多图标会影响页面性能，这里仅渲染前{{ count }}个，<a
            class="link"
            href="https://iconpark.oceanengine.com/official"
            target="_blank">
            点我查看更多图标<Link
          /></a>
        </el-alert>
      </div>
      <ul class="iconpark-list" v-if="mounted">
        <li v-for="(item, idx) in components">
          <div class="flex iconpark-warpper flex-column align-center" ref="iconRef">
            <div class="icons">
              <component :is="item" :size="24"></component>
            </div>
            <div class="name">{{ icons[idx].name }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Link, Info, VolumeNotice } from '@icon-park/vue-next';
import iconJson from '@icon-park/vue-next/icons.json';
import { onMounted, ref, nextTick } from 'vue';
import {
  ACane,
  Abdominal,
  Abnormal,
  Acceleration,
  AcceptEmail,
  Acoustic,
  ActivitySource,
  Ad,
  AdProduct,
  Add,
  AddComputer,
  AddFour,
  AddItem,
  AddMode,
  AddMusic,
  AddOne,
  AddPic,
  AddPicture,
  AddPrint,
  AddSubset,
  AddSubtract,
  AddText,
  AddTextTwo,
  AddThree,
  AddTwo,
  AddUser,
  AddWeb,
  AddressBook,
  AdjacentItem,
  Adjustment,
  AdobeIllustrate,
  AdobeIndesign,
  AdobeLightroom,
  AdobePhotoshop,
  Afferent,
  AfferentFour,
  AfferentThree,
  AfferentTwo,
  AfroPick,
  Agreement,
  Aiming,
  AirBike,
  AirConditioning,
  Airplane,
  AirplaneWindow,
  AirplaneWindowOne,
  Airplay,
  Airpods,
  Alarm,
  AlarmClock
} from '@icon-park/vue-next'; //避免使用iconpark组件导致页面打包过大，这里使用按需导入来做示例

const count = 50;

const components = [
  ACane,
  Abdominal,
  Abnormal,
  Acceleration,
  AcceptEmail,
  Acoustic,
  ActivitySource,
  Ad,
  AdProduct,
  Add,
  AddComputer,
  AddFour,
  AddItem,
  AddMode,
  AddMusic,
  AddOne,
  AddPic,
  AddPicture,
  AddPrint,
  AddSubset,
  AddSubtract,
  AddText,
  AddTextTwo,
  AddThree,
  AddTwo,
  AddUser,
  AddWeb,
  AddressBook,
  AdjacentItem,
  Adjustment,
  AdobeIllustrate,
  AdobeIndesign,
  AdobeLightroom,
  AdobePhotoshop,
  Afferent,
  AfferentFour,
  AfferentThree,
  AfferentTwo,
  AfroPick,
  Agreement,
  Aiming,
  AirBike,
  AirConditioning,
  Airplane,
  AirplaneWindow,
  AirplaneWindowOne,
  Airplay,
  Airpods,
  Alarm,
  AlarmClock
];

const icons = iconJson.slice(0, count);
const mounted = ref(false);

const code = `
  <template>
    <a-cane size="20" fill="#333"/>
  </template>

  <script setup lang="ts">
  import { ACane } from '@icon-park/vue-next';
  <\/script>

`;

const code2 = `
  <template>
    <icon-park type="a-cane" size="24" fill="#333" />
  </template>

  <script setup lang="ts">
  import { IconPark } from '@icon-park/vue-next/es/all';
  <\/script>

`;

onMounted(async () => {
  await nextTick();
  mounted.value = true;
});
</script>

<style scoped lang="scss">
.toolbar {
  margin-top: 20px;
}
.iconpark-list {
  display: flex;
  flex-wrap: wrap;

  li {
    padding: 10px;
    width: 10%;
    min-width: 110px;
    border: 1px solid #ececec;
    margin: -1px 0 0 -1px;

    .iconpark-warpper {
      font-size: 12px;

      .icons {
        width: 24px;
        height: 24px;
      }
      .name {
        margin-top: 8px;
        text-align: center;
      }
    }
  }
}

.tip {
  font-size: 14px;
  margin: 20px 0 10px;
  line-height: 1;
  vertical-align: middle;
}
.note {
  color: var(--el-color-danger);
}
</style>
